@use 'mixins';
@use '../resources/variables';

/** Isolated typography so it can be used in VaContent */
@mixin va-typography {
  .va-link {
    @include mixins.link();

    &-secondary {
      color: var(--va-link-color-secondary);
    }
  }

  .va-title {
    @include mixins.va-title();

    &-info {
      color: var(--va-info);
    }

    &-danger {
      color: var(--va-danger);
    }

    &-warning {
      color: var(--va-warning);
    }
  }

  .va-text {
    &-bold {
      font-weight: bold;
    }

    &-highlighted {
      background-color: var(--va-text-highlighted);
    }

    &-left {
      text-align: left !important;
    }

    &-right {
      text-align: right !important;
    }

    &-center {
      text-align: center !important;
    }

    &-justify {
      text-align: justify !important;
    }

    &-uppercase {
      text-transform: uppercase !important;
    }

    &-lowercase {
      text-transform: lowercase !important;
    }

    &-capitalize {
      text-transform: capitalize !important;
    }

    &-no-wrap {
      white-space: nowrap !important;
    }

    &-truncate {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    &-code {
      @include mixins.va-code;

      padding: 0.1rem 0.2rem;
    }

    @each $color in primary, secondary, warning, success, danger, info, text-primary, text-inverted {
      &-#{$color} {
        color: var(--va-#{$color});
      }
    }
  }

  .va-code-snippet {
    @include mixins.va-code-snippet();
  }

  .va-blockquote {
    border-left: 0.25rem solid var(--va-primary);
    border-radius: 0.125rem;
    padding: 0.4rem 0 0.4rem 0.8rem;
    color: var(--va-secondary);

    p {
      margin-bottom: 0.5rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  @each $element, $size in variables.$display-font-sizes {
    .va-h#{$element} {
      @include mixins.va-display($element);
    }
  }

  ul.va-unordered {
    @include mixins.va-unordered;

    ul.va-unordered,
    ol.va-ordered {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  ol.va-ordered {
    @include mixins.va-ordered;

    ul.va-unordered,
    ol.va-ordered {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .va-table {
    @include mixins.va-table();
  }

  .va-text-block {
    padding: 1.2rem;
    background-color: var(--va-background-element);
    color: var(--va-on-background-element, currentColor);
  }

  hr.va-separator {
    height: 2px;
    // TODO:(1.5.0) Rename color
    background-color: var(--va-divider);
    border: none;
  }

  p.va-paragraph {
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
  }
}
